﻿
@{
    ViewBag.Title = "修改收货地址";
    Layout = "~/Views/Shared/_UserLayout.cshtml";
}

@model UserAddressEditModel

@section Head{
    <link href="~/common/Threelinkage/layui/css/layui.css" rel="stylesheet" type="text/css" />
}
<!--用户中心(地址管理界面)-->
<div class="user_style clearfix" id="user">
    <div class="user_title"><em></em>用户中心</div>
    <div class="clearfix user">
        <!--左侧菜单栏样式-->
        @Html.Partial("~/Views/Shared/_PartialUserLeft.cshtml")

        <!--右侧内容样式-->
        <div class="right_style r_user_style">
            <div class="user_Borders">
                <div class="title_name" style="background-color:#f2f2f2;">
                    <span class="name">地址管理</span>
                </div>
                <div class="about_user_info">
                    <form class="layui-form ">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label col-lg-1">收货人:</label>
                                <div class="layui-input-block">
                                    <input type="hidden" value="@Model.Id" name="Id" />
                                    <input class="layui-input" name="ReciverName" value="@Model.ReciverName" lay-verify="required|username" placeholder="" type="text">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label col-lg-1">手机号:</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" name="PhoneNum" value="@Model.PhoneNum" lay-verify="required|phone" placeholder="" type="text">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label col-lg-1">邮政编码:</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" name="PostEmail" value="@Model.PostEmail" lay-verify="required|PostEmail" placeholder="" type="text">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">所在地区:</label>
                            <div class="layui-input-inline">
                                <select name="ProvinceId" class="ProvinceId" lay-filter="ProvinceId">
                                    @foreach (var province in Model.Provinces)
                                    {
                                        <option selected="@(province.Id == Model.ProvinceId)" value="@province.Id">@province.Name</option>
                                    }
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="CityId" class="CityId" lay-filter="CityId"></select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="AreaId" class="AddressId" lay-filter="AddressId"></select>
                            </div>
                        </div>

                        <div class="layui-form-item col-lg-5">
                            <label class="layui-form-label">详细地址:</label>

                            <div class="layui-input-block ">
                                <textarea name="ReciverAddress" con lay-verify="required|ReciverAddress" placeholder="请填写详细地址" class="layui-textarea">@Model.ReciverAddress</textarea>
                            </div>

                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="add">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!--地址列表-->
                <div class="Address_List">
                    <div class="title_name" style="background-color:#f2f2f2;"><span class="name">用户地址列表</span></div>
                    <div class="list">
                        <table>
                            <thead>
                            <td class="list_name_title0">收件人姓名</td>
                            <td class="list_name_title1">地区</td>
                            <td class="list_name_title4">收货地址</td>
                            <td class="list_name_title2">邮编</td>
                            <td class="list_name_title3">电话</td>
                            <td class="list_name_title5">操作</td>
                            </thead>
                            @foreach (var address in Model.Addresses)
                            {
                                <tr>
                                    <td>@address.ReciverName</td>
                                    <td>@(address.ProvinceName + address.CityName + address.AreaName)</td>
                                    <td>@(address.Adress)</td>
                                    <td>@address.PostEmail</td>
                                    <td>@address.PhoneNum</td>

                                    <td><a href="~/UserAddress/Edit/@address.Id">修改</a><a id="@address.Id" class="delete_Address" href="javascript:void(0)">删除</a></td>
                                </tr>
                            }
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section FooterScript{
    <script src="~/common/Threelinkage/layui/layui.all.js"></script>
    <script type="text/javascript">
          var province =@Model.ProvinceId;
        var city =@Model.CityId;
        var area=@Model.AreaId;
        var index;



        layui.config({
            base: "js/"
        }).use(['form', 'layer', 'jquery', 'layedit'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : parent.layer,
                laypage = layui.laypage,
                layedit = layui.layedit,
                $ = layui.jquery;




            $(".delete_Address").click(function () {

                var id = $(this).attr("id");

                layer.confirm('确定删除地址？', { icon: 3, title: '提示信息' }, function (index) {

                    var index = layer.msg('删除中，请稍候', { icon: 16, time: false, shade: 0.8 });
                    $.ajax({
                        url: "/UserAddress/Delete",
                        type: "post",
                        dataType: "json",
                        data: { "addressId": id },
                        success: function (res) {
                            layer.close(index);
                            if (res.status == "ok") {
                                layer.msg("删除成功", {
                                    icon: 1, time: 2000, end: function () {
                                        layer.msg("正在刷新页面...");
                                        location.reload();
                                    }
                                });



                            } else {
                                layer.msg("删除失败", {
                                    icon: 5, time: 2000, end: function () {
                                        location.reload();
                                    }
                                });
                            }
                        },
                        error: function () {
                            layer.msg("网络请求失败", {
                                icon: 5, time: 2000, end: function () {
                                    location.reload();
                                }
                            });
                        }
                    });
                })



            });

            $(function () {
                index = layer.msg('区域加载中，请稍候', { icon: 16, time: false, shade: 0.8 });
                getCity(province);
                getArea(city);

            });

            //loadArea 页面第一次加载时，需要在市获取完后获取区域
            function getCity(provinceId, loadArea) {
                $(".CityId").html("");
                $.ajax({
                    url: "/UserAddress/GetCity",
                    type: "post",
                    dataType: "json",
                    data: { provinceId: provinceId },
                    traditional: true,//这里设置为true
                    success: function (res) {
                        if (res.status == "ok") {


                            $.each(res.data, function (index, value) {
                                if (city == null && index == 0) {
                                    city = value.id;

                                    loadArea != null ? loadArea() : "";

                                    $(".CityId").append("<option selected='selected' value='" + value.id + "'>" + value.name + "</option>");
                                } else if (value.id == city) {
                                    $(".CityId").append("<option selected='selected' value='" + value.id + "'>" + value.name + "</option>");
                                } else {
                                    $(".CityId").append("<option value='" + value.id + "'>" + value.name + "</option>");
                                }

                            });

                            form.render('select');

                        } else {
                            layer.msg("获取城市失败:" + res.errorMsg, { icon: 5, time: 2000 });
                        }
                    },
                    error: function () {
                        layer.msg("网络请求失败:" + res.errorMsg, { icon: 5, time: 2000 });
                    }
                });
            }

            function getArea(cityId) {
                $(".AddressId").html("");
                $.ajax({
                    url: "/UserAddress/GetArea",
                    type: "post",
                    dataType: "json",
                    data: { cityId: cityId },
                    traditional: true,//这里设置为true
                    success: function (res) {
                        if (res.status == "ok") {

                            layer.close(index);
                            $.each(res.data, function (index, value) {

                                if (area == null && index == 0) {
                                    $(".AddressId").append("<option selected='selected' value='" + value.id + "'>" + value.name + "</option>");
                                } else if (value.id == area) {
                                    $(".AddressId").append("<option selected='selected' value='" + value.id + "'>" + value.name + "</option>");

                                } else {
                                    $(".AddressId").append("<option value='" + value.id + "'>" + value.name + "</option>");
                                }

                            });

                            form.render('select');

                        } else {
                            layer.msg("获取城市失败:" + res.errorMsg, { icon: 5, time: 2000 });
                        }
                    },
                    error: function () {
                        layer.msg("网络请求失败:" + res.errorMsg, { icon: 5, time: 2000 });
                    }
                });
            }


            form.on('select(ProvinceId)', function (data) {
                index = layer.msg('区域加载中，请稍候', { icon: 16, time: false, shade: 0.8 });
                //获取市
                province = data.value;
                city = null;

                $(".AddressId").html("");
                getCity(province, function () {

                    //获取区
                    area = null;
                    getArea(city);
                });

            });

            form.on('select(CityId)', function (data) {

                city = data.value;
                area = null;
                getArea(city);


            });



            //数据验证
            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                },
                ReciverAddress: [/^[\u4E00-\u9FA5A-Za-z0-9_]{0,200}$/, "留言中不能出现特殊字符并且不能多余200个字"],
                PostEmail: [/[1-9]\d{5}(?!\d)/, "请输入正确的邮政编码"],
                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });


            //此处的addNew是38行代码中提交按钮的 lay-filter属性
            form.on("submit(add)", function (data) {

                var index = layer.msg('数据提交中，请稍候', { icon: 16, time: false, shade: 0.8 });

                var formData = $(".layui-form").serialize();    //表单数据

                $.ajax({
                    url: "/UserAddress/Edit",
                    type: "post",
                    dataType: "json",
                    data: formData,
                    traditional: true,//这里设置为true
                    success: function (res) {
                        if (res.status == "ok") {
                            layer.close(index);
                            layer.msg("修改成功", {
                                icon: 1, time: 2000, end: function () {

                                    location.href = "/UserAddress/Index";
                                }
                            });



                        } else {
                            layer.close(index);
                            layer.msg("添加失败:" + res.errorMsg, {
                                icon: 5, time: 2000, end: function () {

                                    layer.closeAll("iframe");
                                    location.reload();
                                }
                            });
                        }
                    },
                    error: function () {
                        top.layer.close(index);
                        layer.msg("网络请求失败,请刷新页面后重试", {
                            icon: 5, time: 2000, end: function () {

                                layer.closeAll("iframe");

                            }
                        });
                    }
                });

                return false;
            })

        })

    </script>
}